<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../css/non-responsive.css" rel="stylesheet">
<link href="../../css/font-awesome.min.css" rel="stylesheet">
<link href="../../ico/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="public/public/docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->


<link rel="stylesheet" href="../../css/jCrop.css">
<link href="../../css/setting.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jCrop.js"></script>
<script src="../../js/logout.js"></script>
<script type="text/javascript">
//jCrop切图
	jQuery(function($){
		// Create variables (in this scope) to hold the API and image size
		var jcrop_api,boundx,boundy;
		
		$("#targett").Jcrop({
			setSelect:[0,0,100,100],//显示盖板DIV，控制盖板大小
			onChange:updatePreview,
			onSelect:updatePreview,
			aspectRatio:1//选框宽高比。说明：width/height
		},function(){
			// Use the API to get the real image size
			var bounds=this.getBounds();
			boundx=bounds[0];
			boundy=bounds[1];
			// Store the API in the jcrop_api variable
			jcrop_api=this;
		});
		
		function updatePreview(c){
			if(parseInt(c.w)>0){
				var rx=100/c.w;
				var ry=100/c.h;
				
				$("#previeww").css({
					width:Math.round(rx*boundx)+"px",
					height:Math.round(ry*boundy)+"px",
					marginLeft:"-"+Math.round(rx*c.x)+"px",
					marginTop:"-"+Math.round(ry*c.y)+"px"
				});
			};
		};
	});

/*
	function huihui()
	{
		var upDiv=$(".jcrop-tracker");
		var img=$("#haha");
		alert(upDiv.offset().left+"-----"+upDiv.offset().top+"--------"+upDiv.width()+"-------"+upDiv.height());
		alert(img.offset().left+"-----"+img.offset().top+"--------"+img.width()+"-------"+img.height());
	}
*/			

//左侧导航栏
	function change_list(a)
	{
		$("#case1").css("display","none");
		$("#case2").css("display","none");
		$("#case3").css("display","none");
		$("#case4").css("display","none");
		$("#a1").attr("class","list-group-item");
		$("#a2").attr("class","list-group-item");
		$("#a3").attr("class","list-group-item");
		$("#a4").attr("class","list-group-item");
		$("#case"+a).css("display","block");
		$("#a"+a).attr("class","active list-group-item");
	}



/*
	function typeLabels(a)
	{
		var textvalue=$("#textvalue").val();
		$(".typeLabel3"+a).attr("class","typeLabel1"+a);
		var typeLabel1=$(".typeLabel1"+a);
		var typeLabel2=$(".typeLabel2"+a);
		typeLabel1.css("background-color","#D0D1E6");
		typeLabel2.css("background-color","#FAFAFA");
		typeLabel2.attr("class","typeLabel3"+a);
		typeLabel1.attr("class","typeLabel2"+a);
	//第一次点击 加上这个分类名
		if($('.typeLabel2'+a+'>a').html())
		{
			$("#textvalue").val(textvalue+$('.typeLabel2'+a+'>a').html());
		}
	//第二次点击 减去这个分类名
		if($('.typeLabel3'+a+'>a').html())
		{
			var strPosition=textvalue.indexOf($('.typeLabel3'+a+'>a').html());
			var textNew1=textvalue.substr(0,strPosition);
			var textNew2=textvalue.substr(strPosition+$('.typeLabel3'+a+'>a').html().length,textvalue.length);
			//var textjiechu=textvalue.substr(strPosition,strPosition+$('.typeLabel3'+a+'>#a').html().length);
			var textNew=textNew1+textNew2;
			$("#textvalue").val(textNew);
		}
	}


	function sub()
	{
		$("#subbutton3").attr("id","subbutton1");
		$("#subbutton2").removeAttr("disabled");
		$("#subbutton1").attr("disabled","disabled");
		$("#subbutton2").attr("id","subbutton3");
		$("#subbutton1").attr("id","subbutton2");
	}
*/

//验证两次密码输入是否相同
	function confirm(){
		var o=document.getElementById('new_pwd').value;
		var n=document.getElementById('con_pwd').value;
		if(o != n){
			document.getElementById('err').innerHTML="您的密码输入有误！";
		} else {
			document.getElementById('err').innerHTML="";
			document.getElementById('pwc').disabled=false;
		}
	}
</script>
</head>
<body>
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- 左侧div -->
			<div class="col-xs-4">
<!-- 个人名片 -->
				<div class="person">
					<div class="list-group list_setting">
					  <a href="javascript:void(0)" id="a1" class="list-group-item active" onclick="change_list(1)"><i class="icon-camera-retro"></i> 头像设置</a>
					  <a href="javascript:void(0)" id="a2" class="list-group-item" onclick="change_list(2)"><i class="icon-info-sign"></i> 基本信息设置</a>
					  <a href="javascript:void(0)" id="a3" class="list-group-item" onclick="change_list(3)"><i class="icon-key"></i> 密码设置</a>
					  <!--<a href="#" id="a4" class="list-group-item" onclick="change_list(4)"><i class="icon-tags"></i>标签设置</a>-->
					</div>
				</div>
			</div>

<!-- 右侧div -->
			<div class="col-xs-8">
<!-- 头像设置 -->
			
				{% if messages %}  
				<div class="alert fade in" role="alert">
				    {% for message in messages %}  
				    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
				    <div{% if message.tags %} class="{{ message.tags }} alert alert-success" id="{{ message.tags }}"{% endif %}>{{ message }}</div>
				    {% endfor %} 
				</div> 
				{% endif %}  
			
				<div class="right casee1" id="case1">
					<div>
						<div class="label_info pull-left">当前头像</div>
						<div class="form_info pull-left"><img src="{{info.domain}}/{{info.img}}-mzchange" width="150px"></div>
						<div class="clearfix"></div>
					</div>
					<div>
						<form action="{% url 'users:head' %}" method="post" enctype="multipart/form-data" id="form">
							{% csrf_token %}
							<div>
								<div class="label_info pull-left">新头像</div>
								<div class="form_info pull-left"><input type="file" id="picture" name="picture"/></div>
								
								<div class="clearfix"></div>
							</div>
						<div class="group_form_all" id="cutimg" style="display:none;">
<!-- js cutimg begin -->
							<div id="show_cut" class="cutImgDiv">
								<div class="pull-left" id="haha" style="width:330px;overflow:hidden;">
									
								</div>
								<div class="pull-left previewwDiv" id="heihei">
									
								</div>
								<div class="clearfix"></div>
							</div>
<!-- js cutimg end -->
						</div>
							<input class="form-control" type="hidden" name="coordinate" id="hidden" />
							<div class="setting_image_btn" style="margin-left:120px"><button type="submit" onclick="refer()" class="btn btn-info">保存</button></div>
						</form>
					</div>
				</div>
<!-- 头像设置 结束处-->
<!-- 基本信息设置 -->
				<div class="right casee2" id="case2">
					<form action="{% url 'users:update' %}" method="post">
						{% csrf_token %}
						<div>
							<div class="label_info pull-left">登入邮箱</div>
							<div class="form_info pull-left"><strong>{{email}}</strong></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">昵称</div>
							<div class="form_info pull-left"><input type="text" name="name" class="form_info_input" value="{{info.user_name|capfirst}}" maxlength="8"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">性别</div>
							<div class="form_info pull-left">
								<span class="pull-left">
									{% ifequal info.sex 1 %}
									<input type="radio" class="radio pull-left" id="male" name="sex" value="1" checked>
									{% else %}
									<input type="radio" class="radio pull-left" id="male" name="sex" value="1" >
									{% endifequal %}
									<label for="male" class=“pull-left> 男</label>
								</span>
								<span class="pull-left">
									{% ifequal info.sex 2 %}
									<input type="radio" class="radio pull-left" id="female" name="sex" value="2" checked>
									{% else %}
									<input type="radio" class="radio pull-left" id="female" name="sex" value="2">
									{% endifequal %}
									<label for="female" class=“pull-left> 女</label>
								</span>
								<div class="clearfix"></div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">职业</div>
							<div class="form_info pull-left"><input type="text" name="work" class="form_info_input" value="{{info.work}}"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">所在城市</div>
							<div class="form_info pull-left"><input type="text" name="position" class="form_info_input" value="{{info.position}}"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">生日</div>
							<div class="form_info pull-left"><input type="text"  name="birthday" class="form_info_input" value="{{info.birthday}}"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">星座</div>
							<div class="form_info pull-left"><input type="text" name="constellation" class="form_info_input" value="{{info.constellation}}"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">签名</div>
							<div class="form_info pull-left"><input type="text" name="sign" class="form_info_input" value="{{info.sign}}"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">自我介绍</div>
							<div class="form_info pull-left"><textarea name="introduce">{{info.introduce}}</textarea></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div style="text-align:center;"><button type="submit" class="btn btn-info">保存</button></div>
						</div>
					</form>			
				</div>
<!-- 基本信息设置 结束处-->
<!-- 密码设置 -->
				<div class="right casee3" id="case3">
					<form action="{% url 'users:pwdchange' %}" method="post">
						{% csrf_token %}
						<div>
							<div class="label_info pull-left">当前密码</div>
							<div class="form_info pull-left"><input type="password" id="old_pwd" name="old_pwd" class="form_info_input"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">新密码</div>
							<div class="form_info pull-left"><input type="password" id="new_pwd" name="new_pwd" class="form_info_input"/></div>
							<div class="clearfix"></div>
						</div>
						<div>
							<div class="label_info pull-left">确认密码</div>
							<div class="form_info pull-left"><input type="password" id="con_pwd" name="confirm_pwd" class="form_info_input" onkeyup="confirm()" /></div>
							<div class="clearfix"></div>
						</div>
						<div id="err"></div>
						<div>
							<div style="text-align:center;"><button type="submit" id="pwc" disabled="true" class="btn btn-info">保存</button></div>
						</div>
					</form>
				</div>
<!-- 密码设置 结束处 -->
<!-- 标签设置  -->	
				<!--<div class="right casee4" id="case4">
					<div>
						<div class="label_info pull-left">相关分类</div>
						<div class="form_info pull-left"><input id="textvalue" type="text" name=""></div>
						<div class="clearfix"></div>
						<div>
							<dl class="tags" style="margin-left:50px;">
循环显示分类标签 开始处 
								<dd class="typeLabel12" onclick="typeLabels(2);" style="float:left;margin-top:10px;margin-left:5px;margin-right:5px;padding-top:2px;padding-bottom:2px;padding-left:8px;padding-right:8px;">
									<a href="javascript:void(0)">  分类1</a>
								</dd>
循环显示分类标签 结束处 		
								<div class="clearfix"></div>						
							</dl>
						</div>-->
						
					</div>
				</div>
<!-- 标签设置 结束处 -->
			</div>
		</div>
	</div>
<script type="text/javascript">
//JS filereader
function handleFileSelect(evt) {
	document.getElementById('cutimg').style.display='block';
	var files = evt.target.files; // FileList object
	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {

	  // Only process image files.
	  if (!f.type.match('image.*')) {
	    continue;
	  }

	  var reader = new FileReader();

	  // Closure to capture the file information.
	  reader.onload = (function(theFile) {
	    return function(e) {
	      // Render thumbnail.
	      var haha=document.getElementById('haha')
	      var heihei=document.getElementById('heihei')
	      //var span = document.createElement('span');
	      haha.innerHTML = ['<img name="img1" id="targett" width="330px" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      heihei.innerHTML = ['<img name="img2" id="previeww" src="', e.target.result,
	                        '" title="', escape(theFile.name), '"/>'].join('');
	      //document.getElementById('haha').insertBefore(span, null);
	      imgs=escape(e.target.result);
	      abc()
	      //var urls=document.images.item(img1).src;
	    };
	  })(f);
	  // Read in the image file as a data URL.
	  reader.readAsDataURL(f);
	}
}

document.getElementById('picture').addEventListener('change', handleFileSelect, false);

//切图
function abc(){
	// Create variables (in this scope) to hold the API and image size
	var jcrop_api,boundx,boundy;
	
	$("#targett").Jcrop({
		setSelect:[0,0,100,100],//显示盖板DIV，控制盖板大小
		onChange:updatePreview,
		onSelect:updatePreview,
		aspectRatio:1//选框宽高比。说明：width/height
	},function(){
		// Use the API to get the real image size
		var bounds=this.getBounds();
		boundx=bounds[0];
		boundy=bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api=this;
	});
	
//设置 切图时，预览的小图片的css
	function updatePreview(c){
		if(parseInt(c.w)>0){
			var rx=100/c.w;
			var ry=100/c.h;
			
			$("#previeww").css({
				width:Math.round(rx*boundx)+"px",
				height:Math.round(ry*boundy)+"px",
				marginLeft:"-"+Math.round(rx*c.x)+"px",
				marginTop:"-"+Math.round(ry*c.y)+"px"
			});
		}
	}
}

//提交表单
function refer(){
	var upDiv=$(".jcrop-tracker");
	var img=$("#haha");
	var x0=upDiv.offset().left-img.offset().left;
	var x1=upDiv.offset().top-img.offset().top;
	var y0=x0+upDiv.width();
	var y1=x1+upDiv.height();
	document.getElementById('hidden').value=x0+"*"+x1+"*"+y0+"*"+y1;
	var form = document.getElementById('form');  
    	form.submit(); 
}
</script>		
</body>
</html>
